<template>
    <div class="likes">
      <div v-for="(like, index) in likes" :key="index" class="like-item">
        <img :src="GetHeadImage(like.head)" alt="头像" class="head" />
        <div class="like-details">
          <div class="username">{{ like.username }}</div>
          <div class="like-message">
            {{ like.type }} <span class="timestamp">{{ like.timestamp }}</span>
          </div>
          <div v-if="like.type === '赞了你的评论'" class="comment-record">
            {{ like.comment }}
          </div>
        </div>
        <img src="@/assets/img/img02.jpg" alt="缩放图" class="zoom-icon" />
        <hr class="divider" />
      </div>
    </div>
  </template>
  
  <script setup>
  import { defineProps } from 'vue';
  const GetHeadImage = (imgsrc) => new URL(imgsrc, import.meta.url).href;
  const props = defineProps({
    likes: {
      type: Array,
      required: true,
    },
  });
  </script>
  
  <style scoped>
  .likes {

    margin-left: 70px;
  }
  .like-item {
  display: flex;
  max-height: 100vh;
  align-items: center;
  border-bottom: 1px solid #eee;
  padding: 24px 0 0 0;
  }
.head {
  position: relative;
  top: -10px;
  margin-right: 24px;
  border-radius: 50%;
  width: 48px;
  height: 48px;
}
  .like-details {
  flex-grow: 1;
  padding: 0 0 24px;
  }
  
  .like-message {
     font-size: 14px;
  color: #33333399;
  }
  .comment-record {
    font-size: 12px;
    color: gray;
  }
  
  .divider {
    border: 0;
    border-top: 5px solid #100f0f;
    margin: 10px 0;
  }
  </style>
  